<template>
  <div>
    <el-card class="question-card">
      <!-- header -->
      <div class="question-card-header">
        <el-avatar
          style="width: 40px; height: 40px"
          :src="avatarFullPath"
        ></el-avatar>
        <div style="width: 250px; font-weight: lighter; margin-left: 10px">
          {{ userName }}
        </div>
        <el-button
          type="primary"
          style="margin-left: 340px"
          @click="toQuestionDetail"
          >去回答</el-button
        >
      </div>
      <!-- body -->
      <div class="question-card-body">
        <h3>{{ artcleTitle }}</h3>
        <div class="question-card-body-text">
          {{ showText }}
        </div>
      </div>
      <!-- bottom -->
      <div class="question-card-bottom">
        <div style="width: 130px; font-weight: lighter">
          <i class="el-icon-ali-weidianzan"></i> 有用 {{ formattedLikeCount }}
        </div>
        <div style="width: 130px; font-weight: lighter">
          <i class="el-icon-chat-dot-square"></i> 评论
          {{ formattedCommentCount }}
        </div>
        <div style="font-weight: lighter">
          <i class="el-icon-date"></i> 日期
          {{ formattedDate }}
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: [
    "userId", //用户Id
    "artcleId", //文章Id
    "artcleTitle", //文章标题
    "articleText", //文章内容
    "likeCount", //点赞数
    "commentCount", //评论数
    "createDate", //创建日期
  ],
  created() {
    this.getUserInfoById();
  },
  data() {
    return {
      userName: "", //用户名
      avatar: "", //头像，
      avatarFullPath: "",
    };
  },
  methods: {
    toQuestionDetail() {
      // 跳转到该帖子的详情页面
      this.$router.push({
        name: "questiondetail", //必须使用路由名称
        params: { userId: this.userId, artcleId: this.artcleId },
      });
    },
    //根据userId获取用户名和头像
    getUserInfoById() {
      this.$request.getHttp({
        url: "/user/getUserInfoById",
        params: {
          userId: this.userId,
        },
        success: (data) => {
          if (data.code == 200) {
            this.userName = data.user.username;
            this.avatar = data.user.avatar;
            this.avatarFullPath = `${this.$store.state.ipAddr}/${this.avatar}`;
          }
        },
        error: (error) => {},
      });
    },
  },
  computed: {
    //显示articleText的信息
    showText() {
      if (this.articleText.length < 300) return this.articleText;
      else {
        return this.articleText.substring(0, 300) + "...";
      }
    },
    formattedLikeCount() {
      const likeCount = this.likeCount;

      if (likeCount < 10000) {
        // 当数字小于5位数时，返回当前数字，并用空格填充到4位
        return likeCount;
      } else {
        // 当数字大于5位数时，转换成w表示法，并用空格填充到4位
        const formattedLikeCount = (likeCount / 10000).toFixed(1);
        return `${formattedLikeCount}w`.padStart(4, " ");
      }
    },
    formattedCommentCount() {
      const commentCount = this.commentCount;

      if (commentCount < 10000) {
        // 当数字小于5位数时，返回当前数字，并用空格填充到4位
        return commentCount;
      } else {
        // 当数字大于5位数时，转换成w表示法，并用空格填充到4位
        const formattedCommentCount = (commentCount / 10000).toFixed(1);
        return `${formattedCommentCount}w`.padStart(4, " ");
      }
    },
    formattedDate() {
      const today = new Date(this.createDate);
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
      const day = String(today.getDate()).padStart(2, "0");
      const formattedDate = `${year}-${month}-${day}`;
      return formattedDate;
    },
  },
};
</script>

<style scoped>
.question-card {
  width: 780px;
  height: 370px;
  margin-bottom: 20px;
}
.question-card-header {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.question-card-body {
  margin-top: 10px;
  margin-left: 35px;
  width: 680px;
  height: 240px;
}

.question-card-bottom {
  display: flex;
  align-items: center;
  margin-left: 300px;
}
</style>